<template>
  <div v-size-on="handleSizeChange" class="scroll-container">
    <div class="scroll-content">
        <div class="content">
          <slot />
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import vSizeOn from '../directs/vSizeOn.ts'
const sizeRect = reactive({
  w: 0,
  h: 0
})
const handleSizeChange = (size: { width: number, height: number }) => {
  sizeRect.w = size.width
  sizeRect.h = size.height
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  height: 100%;
}

.scroll-content {
  --w: calc(v-bind(sizeRect.h) * 1px);
  --h: calc(v-bind(sizeRect.w) * 1px);
  /* 宽度为外层容器高度 */
  width: var(--w); 
  /* 高度为外层容器宽度 */
  height: var(--h);
  position: relative;
  transform-origin: left top;
  /* 以左上角为旋转中心 */
  transform: translateY(var(--w)) rotate(-90deg);
  /* 旋转90度 */
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  overflow: hidden scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* 隐藏默认的滚动条 - Chrome/Safari */
.scroll-content::-webkit-scrollbar {
  display: none;
}

.content {
  --w: calc(v-bind(sizeRect.w)*1px);
  --h: calc(v-bind(sizeRect.h)*1px);
  width: auto;
  /* 自动宽度 */
  min-width: var(--w);
  /* 最小宽度 */
  height: var(--h);
  position: absolute;
  left: var(--h);
  transform-origin: left top;
  transform: rotate(90deg);
  white-space: nowrap;
  /* 防止内容换行 */
}
</style>